<template>
  <Card style="height:800px">
    <Row>
      <template style="position:relative;">
        <Menu style="float:left;" mode="horizontal" :theme="theme1" active-name="not" @on-select="queryfaceSigStatus">
          <MenuItem name="not">
          <Icon type="information-circled"></Icon>
          待处理({{not === null ? 0 : not}})份
          </MenuItem>
          <MenuItem name="is">
          <Icon type="help-circled"></Icon>
          处理中({{is === null ? 0 : is}})份
          </MenuItem>
          <MenuItem name="has">
          <Icon type="checkmark-circled"></Icon>
          已处理({{has === null ? 0 : has}})份
          </MenuItem>
        </Menu>
        <div style="float:right;">
          <i-button type="primary" @click="handleAdd">新建面签任务</i-button>
          <i-button type="primary" @click="handleTake" style="margin:0px 0px 0px 20px;width: 90px">取件</i-button>
          <Button type="primary" @click="openModal" style="margin:0px 0px 0px 20px;width: 90px">贷款事项</Button>
        </div>
      </template>
    </Row>
    <Row>
      <Col span="24">
      <Card>
        <!-- <Row type="flex" justify="center" align="middle" class="list-query"> -->
          <div>
          <Table :columns="columns1" :data="dataPage" @on-selection-change="handleRowChange"></Table>
          </div>
          <div style="text-align: center;margin-top: 36px;">
            <Page :total="dataTotal" :current="pageNo" :page-size="pageSize" size="small" show-elevator show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
          </div>
        <!-- </Row> -->
      </Card>
      </Col>
    </Row>
  </Card>
</template>

<script>
export default {
  name: 'videofacesig',
  data () {
    return {
      tmpSelection: null,
      baseUrl: this.$appContext.marvels_core_approve,
      $ajax: null,
      modal1: false,
      modalComptParams: {
        isModal: false,
        curLoanId: ''
      },
      columns1: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '序号',
          type: 'index',
          width: 80,
          align: 'center'
        },
        {
          align: 'center',
          title: '客户姓名',
          key: 'custName',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('a', {
                style: {
                  // textDecoration: 'underline',
                  decoration: 'none'
                },
                on: {
                  click: function () {
                    vm.$router.push({
                      name: 'videofacesigWorkpage',
                      query: {
                        loanId: params.row.loanId,
                        userId: params.row.userId,
                        id: params.row.id,
                        type: params.row.faceSigStatus
                      }
                    })
                  }
                }
              }, params.row.custName)
            ])
          }
        },
        {
          align: 'center',
          title: '贷款ID',
          key: 'loanId'
        },
        {
          align: 'center',
          title: '面谈日期',
          key: 'appointmentDate',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.formatDate(params.row.appointmentDate))
            ])
          }
        },
        {
          align: 'center',
          title: '时间段',
          key: 'time',
          render: (h, params) => {
            if (params.row.startConfigTime && params.row.endConfigTime) {
              return h('div', [
                h('span', params.row.startConfigTime + '-' + params.row.endConfigTime)
              ])
            }
          }
        },
        {
          align: 'center',
          title: '客户经理',
          key: 'clientManager'
        },
        {
          align: 'center',
          title: '面签状态',
          key: 'faceSigStatus',
          render: (h, params) => {
            const vm = this
            return h('div', {
              domProps: {
                innerHTML: vm.renderColumnContext(params)
              }
            }, params.row.faceSigStatus)
          }
        },
        {
          align: 'center',
          title: '距离审批通过日',
          width: 140,
          key: 'createTime',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.fromatHoursTime(params.row.appointmentDate - params.row.rangeTime))
            ])
          }
        },
        {
          align: 'center',
          title: '退回日期',
          key: '',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.formatTime(params.row.createTime))
            ])
          }
        }
      ],
      startTime: '',
      endTime: '',
      custName: '',
      custIdcard: '',
      clientManager: '',
      processStatus: '',
      faceSigStatus: '',
      dataPage: [],
      dataTotal: 0,
      pageNo: 1,
      pageSize: 10,
      choosedRow: null,
      horizontal: '',
      theme1: 'light',
      stuts: null,
      usercode: null,
      not: null,
      is: null,
      has: null
    }
  },
  methods: {
    // 返回选择的选择器
    handleRowChange (selection) {
      this.tmpSelection = selection
    },
    openModal: function () {
      if (this.tmpSelection === null || this.tmpSelection.length === 0) {
        this.$Message.warning('请选择要查看的面签')
        return
      }
      if (this.tmpSelection.length > 1) {
        this.$Message.warning('只能选择一项进行操作')
        return
      }
      this.$router.push({
        name: 'videofacesigWorkpage',
        query: {
          loanId: this.tmpSelection[0].loanId,
          userId: this.tmpSelection[0].userId,
          id: this.tmpSelection[0].id,
          type: this.tmpSelection[0].faceSigStatus
        }
      })
    },
    // 表格单元格渲染布尔值
    renderColumnContext: function (rowContext) {
      if (rowContext.column.key === 'faceSigStatus') {
        var status = rowContext.row.faceSigStatus
        if (status === '0') {
          return '未面签'
        } else if (status === '1') {
          return '正在面签'
        } else if (status === '2') {
          return '已面签'
        } else if (status === '3') {
          return '已过号'
        } else if (status === '4') {
          return '面谈通过'
        } else if (status === '5') {
          return '面谈退回'
        } else if (status === '6') {
          return '面谈否决'
        } else if (status === '7') {
          return '待面签'
        } else if (status === '8') {
          return '面签退回'
        } else if (status === '9') {
          return '面签拒绝'
        } else {
          return '挂起'
        }
      }
    },
    // 查询处理状态
    queryStatus () {
      this.$ajax.get(this.baseUrl + 'approve/spmq/service/getfacesigstatus').then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        this.not = data.data.not
        this.is = data.data.is
        this.has = data.data.has
      }).catch(er => {

      })
    },
    // 分页查询
    searchPage (initParam) {
      if (initParam === 'null') {
        return
      }
      var vm = this
      var params = {
        pageNo: vm.pageNo,
        pageSize: vm.pageSize,
        faceSigStatus: initParam
      }
      var url = this.baseUrl + 'approve/spmq/service/videofaceSigPageList/' + params.pageNo + '/' + params.pageSize
      this.$ajax.post(url, params).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        this.dataPage = data.data.list
        this.dataTotal = data.data.total
      }).catch(er => {

      })
    },
    pageChange: function (pageNum) {
      var vm = this
      if (name === 'not') {
        this.stuts = '0'
      } else if (name === 'is') {
        this.stuts = '1,4,6,7,8,9'
        // 已过号
      } else if (name === 'has') {
        this.stuts = '2,3'
      }
      vm.pageNo = pageNum
      vm.searchPage(this.stuts)
    },
    sizeChange: function (pageLength) {
      var vm = this
      if (name === 'not') {
        this.stuts = 'null'
      } else if (name === 'is') {
        this.stuts = '0,1,4,6,7,8,9'
        // 已过号
      } else if (name === 'has') {
        this.stuts = '2,3'
      }
      vm.pageSize = pageLength
      vm.searchPage(this.stuts)
    },
    // 通过状态获取查询
    queryfaceSigStatus: function (name) {
      // if (this.has === null || this.is === null) {
      //   return
      // }
      // -------------------------------------------------------------------------状态
      if (name === 'not') {
        this.stuts = '0'
      } else if (name === 'is') {
        this.stuts = '1,4,6,7,8,9'
        // 已过号
      } else if (name === 'has') {
        this.stuts = '2,3'
      }
      this.pageNo = 1
      this.searchPage(this.stuts)
    },

    // 新建面签任务
    handleAdd: function () {
      this.$router.push({ name: 'videofacesigEditor', query: { type: 2 } })
    },
    // 取件
    handleTake: function () {
      var param = {
        nodeCode: sessionStorage.nodeCode,
        groupCode: sessionStorage.groupCode,
        curNodeCode: 'woInterview' // 页面上写死的
      }
      this.$ajax.post(this.baseUrl + 'approve/spmq/service/takeFacesig', param).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(data.data)
        } else {
          this.$Message.success(message)
        }
        this.searchPage('0')
        this.queryStatus()
      }).catch(er => {

      })
    },
    // 获取用户权限
    getUserCode: function () {
      this.$ajax.get(this.baseUrl + 'approve/spmq/service/getUserCode').then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
        }
        // ;
        // 作业主管和审批主管权限的用户才能看到并使用
      }).catch(er => {

      })
    } // 贷款事项
  },
  mounted () {
    this.$ajax = this.$util.ajax(this.$appContext.marvels_core_approve)
    this.queryStatus()
    this.getUserCode()
    this.queryfaceSigStatus('not')
  },
  created: function () {

  }

}
</script>
